
// 主入口文件  main.js  
 
console.log("主入口文件 -- main.js  -- react  - Heelo  -- YYDS")

import "@/assets/styles/index.scss"
// import {word,msg } from "~"
// import text from "@/utils/demo"
// import imglink from "@/assets/images/img4.jpg";
// console.log(imglink)
// var app = document.getElementById("app")
// app.innerHTML += `<h2>wh2107-daydayup</h2>
//                   <h2>wh2107-天道酬勤 </h2>
//                   <h2> ${word} </h2>
//                   <h2> ${msg} </h2>
//                   <h2>${text} </h2>
//                   <img class="myimg" src='${imglink}' alt=""/>
//                   `;

import React from "react"
import ReactDOM from "react-dom"
import MainComponent from "./views/index.jsx"
import Layouts from "./components/index.jsx";
import { MainRouter } from "./router";
import { ReduxDemo } from "./redux";
import { HooksDemo } from "./hooks";


class App extends React.Component{
  render(){
    return (
      <div>
        <h2> App - App - 根组件 </h2>
        {/* <FirstCpt></FirstCpt>
        <MainComponent/>
        <MyDemo></MyDemo> */}
        <hr/>
        {/* <Layouts/> */}
        {/* <MainRouter/> */}
        
      </div>
    )
  }
}

// ReactDOM.render(根组件,根元素)

// import store from "@/redux/store"
// import { ReactReduxDemo } from "./react-redux";
// import {Provider} from "react-redux"
// import { store } from "./react-redux/store";

// ReactDOM.render(
//   <Provider store={store}>
//       <ReactReduxDemo/>
//   </Provider>
//   ,
//   document.getElementById("app")
// )

// 重新二次渲染  每当state 改变  会触发这个函数 执行组件的二次渲染 视图刷新 
// store.subscribe(()=>{
//   ReactDOM.render(
//     <ReduxDemo/>,
//     document.getElementById("app")
//   )
// })


// import { MobxDemo } from "./mobx";
// import  {Provider} from "mobx-react"
// import store from "./mobx/store";
// ReactDOM.render(
//   <Provider { ...store}  >
//       <MobxDemo/>
//   </Provider>
//    ,
//   document.getElementById("app")
// )


ReactDOM.render(
  <HooksDemo/>,
  document.getElementById("app")
)